<template>
  <div class="popContainer" :class="{ fadeOut: countdown === 0 }">
    <button
      v-if="!showOverlay"
      @click="startCountdown"
      :class="{ action: showBtn }"
      class="actionBtn"
    >
      <i class="el-icon-video-play" style="color: #fff; font-size: 60px"></i>
    </button>
    <div
      v-if="countdown > 0 && showOverlay"
      class="countdown"
      :class="{ action: animateNumber }"
      ref="countdown"
    >
      {{ countdown }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBtn: false,
      showOverlay: false,
      countdown: 3,
      animateNumber: false,
    };
  },
  watch: {
    countdown(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.animateNumber = true;
        setTimeout(() => {
          this.animateNumber = false;
        }, 100); // 动画持续时间
      }
    },
  },
  methods: {
    startCountdown() {
      this.showBtn = true;
      setTimeout(() => {
        this.showBtn = false;
        this.showOverlay = true;
        this.countdown = 3;
        const interval = setInterval(() => {
          this.countdown--;
          if (this.countdown === 0) {
            clearInterval(interval);
            setTimeout(() => {
              this.showOverlay = false;
            }, 1000); // 延迟1秒以完成渐隐动画
            this.$parent.action();
          }
        }, 1000);
      }, 300);
    },
  },
};
</script>

<style scoped lang="scss">
.popContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown {
  font-size: 3em;
  color: white;
}
.actionBtn {
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 0;
}
.action {
  animation: fadeOutScaleUp 0.5s forwards;
}
.fadeOut {
  animation: fadeOut 1s forwards;
}
@keyframes fadeOutScaleUp {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5); /* 假设scaleUp将元素放大到1.5倍 */
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
